可以在正式上線的網頁中，按 F12 > Lighthouse，讓他對網頁進行效能檢查。檢查結果會有以下分類：
⇒ 在 <NuxtImg> 加上 loading="lazy” ， format="webp"
⇒ 要把字型換成 SVG，請改成mdi-svg，並移除字型 CSS
role="checkbox" 和 aria-checked="true|false"，才能正確傳達其狀態。<html> element does not have a [lang] attribute⇒ CIS 顏色對比調整
⇒ 更新 nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
htmlAttrs: {
lang: 'zh-Hant' // 👈 這裡指定語言
}
}
})
參考文件：https://developer.chrome.com/docs/lighthouse/performance/performance-scoring?hl=zh-tw
優化後的結果，當然還可以更好，繼續優化！
iThome鐵人賽
看影片追技術